<template>
    <ContentWrap>
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
            <el-form-item label="题目类型" prop="dictType">
                <el-input />
            </el-form-item>
            <el-form-item label="题目编号" prop="label">
                <el-input v-model="queryParams.label" placeholder="请输入题目编号" clearable class="!w-240px" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择你的类型" clearable>
                    <el-option label="单选" value="单选" />
                    <el-option label="多选" value="多选" />
                    <el-option label="判断" value="判断" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button>
                    <Icon icon="ep:search" class="mr-5px" /> 搜索
                </el-button>
                <el-button>
                    <Icon icon="ep:refresh" class="mr-5px" /> 重置
                </el-button>
                <el-button type="primary" plain @click="openForm" v-hasPermi="['system:dict:create']">
                    <Icon icon="ep:plus" class="mr-5px" /> 新增
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
        <el-table v-model="loading" :data="newArr">
            <el-table-column label="题目" align="center" prop="problem" />
            <el-table-column label="答案" align="center" prop="answer" show-overflow-tooltip />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <!-- <el-button link type="primary">
                        修改
                    </el-button> -->
                    <el-button link type="danger" @click="delet(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
            @pagination="getList" />
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <Dialog v-model="dialogVisible" title="添加题目">
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
            <el-form-item label="文章id" prop="articleld">
                <el-input v-model="formData.articleld" disabled />
            </el-form-item>
            <el-form-item label="题目标题" prop="title">
                <el-input v-model="formData.title" />
            </el-form-item>
            <el-form-item label="题目类型">
                <el-radio-group v-model="formData.type">
                    <el-radio label="1">单选</el-radio>
                    <el-radio label="2">多选</el-radio>
                    <el-radio label="3">判断</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="问题" prop="problem">
                <el-input v-model="formData.problem" placeholder="请输入内容" />
            </el-form-item>

            <el-form-item label="答案" prop="answer">
                <el-input placeholder="请填写题目选项" v-model="formData.answer" />
            </el-form-item>
            <el-form-item label="内容" prop="body">
                <el-input v-model="formData.body" placeholder="请输入内容" type="textarea" />
            </el-form-item>
            <el-form-item label="错误数" prop="errorNumber">
                <el-input v-model="formData.errorNumber" placeholder="请输入错误数" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
        </template>
    </Dialog>
</template>
<script setup lang="ts" name="SystemDictData">
import { questionnaire, questionnaireList, questionnaireDele } from "@/api/system/question/index"
// import { forEach } from "min-dash";
import { useRoute } from "vue-router";


const ids = ref()
const route = useRoute() // 路由
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const newArr = ref([])// 列表的数据
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    label: '',
    status: undefined,
    dictType: route.params.dictType
})
const queryFormRef = ref() // 搜索的表单

const dialogVisible = ref(false) // 弹窗的是否展示
ids.value = route.query.id
const formData: any = reactive({
    articleId: ids.value,
    title: '',
    type: '',
    problem: '',
    answer: '',
    errorNumber: '',
    body: ''
})
const formRules = reactive({
    label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
    value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
    sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref


// 打开弹窗
const openForm = () => {
    dialogVisible.value = true
}
const submitForm = async () => {
    let res = await questionnaire({
        articleId: parseInt(formData.articleld),
        title: formData.title,
        type: parseInt(formData.type),
        body: formData.body,
        problem: formData.problem,
        answer: formData.answer,
        errorNumber: parseInt(formData.errorNumber),
    })
    console.log(res, "panduan")
    getList()
    dialogVisible.value = false
    formData.value = ''

}

/** 查询列表 */
const getList = async () => {

    let res = await questionnaireList({
        articleId: route.query.id,
        pageNo: 1,
        pageSize: 10,
    })
    res.list.forEach((item) => {
        if (item.articleId === parseInt(ids.value)) {
            newArr.value.push(item)
        }
    })
    console.log(newArr.value)
}

// 删除
const delet = async (ids) => {
    let res = await questionnaireDele(ids)
    getList()
    console.log(res)

}
// const getData = async () => {
//     let res = await questionnaireli(route.query.id)
//     console.log(res)
// }

/** 初始化 **/
onMounted(() => {
    getList()
})
</script>
